<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            background-color: #403833;
            font-size: 100%;
            font-family: 'Open Sans';
            font-weight: 100;
            height:100%;
        }
        .loader {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -mos-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align:center;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor:default;
        }


        .loader {
            width:80%;
            height:36px;
            overflow:visible;
        }

        .loader div {
            position:absolute;
            width:30px;
            height:36px;
            margin:0 10px;
            opacity:0;
            animation:move 2s linear infinite;
            -o-animation:move 2s linear infinite;
            -moz-animation:move 2s linear infinite;
            -webkit-animation:move 2s linear infinite;
            transform:rotate(180deg);
            -o-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
            color:#fff;
            font-size:3em;
        }
        .loader div:nth-child(8):before{
            content:'';
            position:absolute;
            bottom:-15px;
            left:0px;
            width:30px;
            height:30px;
            background:#DB2F00;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
        }
        .loader div:nth-child(9):before{
            content:'';
            position:absolute;
            bottom:-15px;
            left:0px;
            width:30px;
            height:30px;
            background:#f2f2f2;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
        }
        .loader div:nth-child(10):before{
            content:'';
            position:absolute;
            bottom:-15px;
            left:0px;
            width:30px;
            height:30px;
            background:#13A3A5;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
        }

        .loader div:after{
            content:'';
            position:absolute;
            bottom:-40px;
            left:0px;
            width:30px;
            height:5px;
            background:#39312d;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
        }

        .loader div:nth-child(2) {
            animation-delay:0.2s;
            -o-animation-delay:0.2s;
            -moz-animation-delay:0.2s;
            -webkit-animation-delay:0.2s;
        }
        .loader div:nth-child(3) {
            animation-delay:0.4s;
            -o-animation-delay:0.4s;
            -webkit-animation-delay:0.4s;
            -webkit-animation-delay:0.4s;
        }
        .loader div:nth-child(4) {
            animation-delay:0.6s;
            -o-animation-delay:0.6s;
            -moz-animation-delay:0.6s;
            -webkit-animation-delay:0.6s;
        }
        .loader div:nth-child(5) {
            animation-delay:0.8s;
            -o-animation-delay:0.8s;
            -moz-animation-delay:0.8s;
            -webkit-animation-delay:0.8s;
        }
        .loader div:nth-child(6) {
            animation-delay:1s;
            -o-animation-delay:1s;
            -moz-animation-delay:1s;
            -webkit-animation-delay:1s;
        }
        .loader div:nth-child(7) {
            animation-delay:1.2s;
            -o-animation-delay:1.2s;
            -moz-animation-delay:1.2s;
            -webkit-animation-delay:1.2s;
        }
        .loader div:nth-child(8) {
            animation-delay:1.4s;
            -o-animation-delay:1.4s;
            -moz-animation-delay:1.4s;
            -webkit-animation-delay:1.4s;
        }
        .loader div:nth-child(9) {
            animation-delay:1.6s;
            -o-animation-delay:1.6s;
            -moz-animation-delay:1.6s;
            -webkit-animation-delay:1.6s;
        }
        .loader div:nth-child(10) {
            animation-delay:1.8s;
            -o-animation-delay:1.8s;
            -moz-animation-delay:1.8s;
            -webkit-animation-delay:1.8s;
        }

        @keyframes move {
            0% {
                right:0;
                opacity:0;
            }
            35% {
                right: 41%;
                -moz-transform:rotate(0deg);
                -webkit-transform:rotate(0deg);
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                right:59%;
                -moz-transform:rotate(0deg);
                -webkit-transform:rotate(0deg);
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                right:100%;
                -moz-transform:rotate(-180deg);
                -webkit-transform:rotate(-180deg);
                -o-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-moz-keyframes move {
            0% {
                right:0;
                opacity:0;
            }
            35% {
                right:41%;
                -moz-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                right:59%;
                -moz-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                right:100%;
                -moz-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-webkit-keyframes move {
            0% {
                right:0;
                opacity:0;
            }
            35% {
                right:41%;
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            75% {
                right:59%;
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                right:100%;
                -webkit-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-o-keyframes move {
            0% {
                right:0;
                opacity:0;
            }
            35% {
                right:41%;
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                right:59%;
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                right:100%;
                -o-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

    </style>
</head>
<body>
<div class="loader">
    <div>L</div>
    <div>O</div>
    <div>A</div>
    <div>D</div>
    <div>I</div>
    <div>N</div>
    <div>G</div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>